<template>
  <section>
    <div>
      <p>
        setup()函数中直接返回的普通变量，模板语法中可以使用，但它是单行绑定的。
      </p>
      <p>{{ text }}</p>
      <input type="text" v-model="text" />
    </div>
    <div>
      <p>
        直接暴露出来的属性，虽然可以使用，但是单向绑定甚至都不是响应式的（只能绑定一次值，值改变之后标签内的值不能更改）
      </p>
      <p>{{ num }}</p>
    </div>
  </section>
</template>

<script>

export default {
  setup() {
    let text = "Hello Vue3.x";

    let num = 0;
    

    setInterval(() => {
      num ++;
    }, 1000);

    // setup最后一定要有return返回一个对象，把对象的属性暴露出去
    return { text, num };
  },
};
</script>

<style>
</style>